<template>
    <div class="shop">
       <div class="head">
          <NavBar lgpad actived v-model="keyword" />
          <div class="tab">
            <div v-for="(item, index) in tabs.list" :class="{ act: act === index }" @click="change(index)">{{ item.label }}</div>
          </div>
       </div>
       <div class="list">
            <ListItem
            :list="list.shop"
            v-model="isLoading"
            :finished="finished"
            :loading="loading"
            @refresh="test"
            @load="load"       
            >
                <template #default="props">
                    <div class="item">
                        <img src="@/assets/shoplogo.png"/>
                        <div class="desc">
                            <div class="shop_name">{{ props.item.shopName }}</div>
                                <div class="info">
                                <div class="num">销量：265.5w</div>
                                <div class="rate">评分：{{ props.item.rate }}</div>
                            </div>
                        </div>
                    </div> 
                </template>      
            </ListItem>      
       </div>
    </div>
</template>

<script setup>
    import { ref, reactive, watch } from 'vue'
    import { shopList } from '@/api'
    const isLoading = ref(false)
    const loading = ref(false)
    const finished = ref(false)
    const keyword = ref('2222')
    const list = reactive({
        shop: []
    })
    const params = reactive({
        page: 1,
        size: 10
    })
    const act = ref(0)
    const tabs = reactive({
        list: [
            { label: '小店分类', value: 0 },
            { label: '综合排序', value: 0 }
        ]
    })

    const change = index => { // 切换导航
        act.value = index
    }
    const test = () => {
        isLoading.value = true
        params.page = 1
        getList('refresh').then(_=> {
            isLoading.value = false
        })
    }

    const load = () => {
        loading.value = true
        getList().then(_ => {
            loading.value = false
        })
    }
    function getList (type = 'load') {
        return new Promise(resolve => {
            shopList(params).then(res => {
                if (res.code === 200) {
                    const shoplist = res.data
                    params.page++
                    if (type === 'refresh') list.shop = []
                    list.shop = [...list.shop, ...res.data]
                    if (res.data.length < params.size) finished.value = true                
                }
                resolve()
            })
        })
    }
    watch (() => keyword, (val, oldval) => {
        console.log(val)
    })
</script>

<style lang="scss" scoped>
.shop {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #2D3856;
   .head {
        padding: 10px 0 0 0;
        position: relative;
        overflow:hidden;
        .tab {
            display: flex;
            color: white;
            justify-content: space-between;
            margin: 10px 20px 12px;
            font-size: 15px;
            & > div {
                position: relative;
                &:last-of-type {
                    margin-right: 12px;
                }
                &::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 0;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-top: 6px solid #cdcdcd;
                    top: 60%;
                    transform: translate(5px, -50%);
                }
                &.act {
                    color: #5F5AF7;
                }                
            }
        }
   }
   .list {
       flex: 1;
       position: relative;
       background-color: #F9F8F8;
       border-radius: 8px 8px 0 0;
       overflow: hidden;
       display: flex;
        .item {
            background-color: white;
            padding: 5px 15px;
            display: flex;
            align-items: center;
            position: relative;
            &::after {
                position: absolute;
                content: '';
                width: 8px;
                height: 8px;
                border-top:2px solid #b6b6b6;
                border-right: 2px solid #b6b6b6;
                top: 50%;
                right: 20px;
                transform: translate(0, -50%) rotate(45deg);
            }
            &:not(:last-of-type) {
                margin-bottom: 5px;
            }
            img {
                width: 82px;
                height: 82px;
                display: block;
            }
            .desc {
                flex: 1;
                overflow: hidden;
                .shop_name {
                    font-size: 16px;
                    margin-bottom: 12px;
                    padding-right: 15px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;                    
                }
                .info {
                    font-size: 12px;
                    color:#666;
                    display: flex;
                    .num {
                        margin-right: 15px;
                    }
                }
            }
        }       
   }
}

</style>